// 表单工具条
<template>

    <div class="form-tools-bar">
        <c-fun-block 
        v-for='(item, index) of toolsFunConf' 
        :key='index' 
        :type='item.type' 
        :icon='item.icon' 
        :title='item.title' 
        :peg='index'
        @funAction='funAction(index)'>
        </c-fun-block>
    </div>
    
</template>

<script lang='ts'>
import { Component, Prop, Vue } from 'vue-property-decorator' 

@Component({})
export default class formToolsBar extends Vue{
    name:string = 'formToolsBar'
    
    @Prop()
    toolsFunConf:commonInf.toolsBarItem[]

    // 工具函数触发事件( 此peg 与 方法配置peg不同)
    funAction(peg:string | number){
        this.toolsFunConf[peg].fn()
    }

}


</script>

<style scoped lang='scss'>

.form-tools-bar{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    flex-wrap: wrap;
}

</style>